<script setup lang="ts">
import { ref } from 'vue';
import { docheckphone,dosendmsgcode,docheckcode,dofinishregister } from '../../API/login-API'
import { showSuccessToast } from 'vant';
import { useRouter } from 'vue-router';
import { useCountDown } from '@vant/use';

const router = useRouter()
const tel = ref('')
const password = ref('')
const sms = ref<number>()
const dbword = ref('')
const flag = ref(false)
const visible = ref(false)
const visible2 = ref(false)
const togge = ref(true)
const countDown = useCountDown({
    time:60*1000,
    onFinish:() => {
        togge.value = true
    }
})

const blurTel = async () => {
    const res = await docheckphone(tel.value)
    console.log(res);
    if(res.code === '200') {
        flag.value = true
    }else {
        showSuccessToast(res.message);
    }
}

    
const onSend = async () => {
    const res =  await dosendmsgcode(tel.value);
    console.log(res);
    if(res.code === '200') {
        console.log('验证码发送成功');
        sms.value = res.data
        togge.value = false
        countDown.start()
    }
}

const onSubmit = async (val:any) => {
    console.log(val);
    const res = await docheckcode(val.username,val.sms)
    if(res.code === '200') {
        finishregister(val)
    }
}

const rightIcon = () => {
    visible.value = !visible.value
}

const rightI = () => {
    visible2.value = !visible2.value
}

const validator = (val:any) => {
    return password.value == val
}

const finishregister = async(val:any) => {
    const req = await  dofinishregister(val.username,val.password)
    showSuccessToast(req.message);
    if(req.code === '200') {
        router.push('/login')
    }
}
</script>

<template>
    <Headers visible title="注册" :visib="false"></Headers>
    <van-form @submit.enter="onSubmit">
        <van-cell-group inset>
            <van-field
                v-model="tel"
                name="username"
                label="用户名"
                placeholder="用户名"
                @blur="blurTel"
                :rules="[{ required: true, message: '请填写用户名' },{pattern:/1\d{10}$/,message:'请输入11位的手机号'}]"
            />
            <van-field
                v-model="sms"
                center
                clearable
                name="sms"
                label="短信验证码"
                placeholder="请输入短信验证码"
            >
                <template #button>
                <van-button 
                    v-if="togge"
                    size="small" 
                    type="primary" 
                    :disabled="!flag"
                    @click="onSend"
                >
                发送验证码
                </van-button>
                <van-button 
                    v-else
                    size="small" 
                    type="primary" 
                    :disabled="true"
                >
                <span>倒计时{{countDown.current.value.seconds}}s</span>
                </van-button>
                </template>
            </van-field>
            <van-field
                v-model="password"
                :type="visible ? 'text' : 'password'"
                name="password"
                label="密码"
                placeholder="密码"
                :right-icon="visible ? 'eye-o' :  'closed-eye' "
                @click-right-icon.stop="rightIcon"
                :rules="[{ required: true, message: '请填写密码' },{pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,8}$/,message:'请输入包含字母和数字的5-8位密码'}]"/>
            <van-field
                v-model="dbword"
                name="dbword"
                label="确认密码"
                :type="visible2 ? 'text' : 'password'"
                :right-icon="visible2 ? 'eye-o' :  'closed-eye' "
                @click-right-icon.stop="rightI"
                placeholder="确认密码"
                :rules="[{ required: true, message: '请确认密码' },{pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,8}$/,message:'请输入包含字母和数字的5-8位密码'},{validator,message:'密码不一致'}]"/>
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
            注册
            </van-button>
        </div>
    </van-form>

</template>